<template>
  <div ref="chart" style="width: 80.2083vw; height: 27vw;"></div>
</template>

<script>
const echarts = require('echarts/lib/echarts')

export default {
  mounted () {
    // this.renderChart()
  },
  data () {
    return {
      deviceName: {
        1: '土壤监测仪',
        2: '气象检测仪',
        3: '长势监测仪',
        4: '视频监控'
      },
      echartsData: null
    }
  },
  props: {
    deviceType: {
      type: String,
      default: ''
    }
    // echartsData: {
    //   type: Object,
    //   require: true
    // }
  },
  watch: {
    // echartsData: {
    //   handler (newValue, oldValue) {
    //     // 当 echartsData 变化时调用 renderChart 方法
    //     if (Object.keys(newValue).length !== 0) {
    //       this.renderChart()
    //     }
    //   },
    //   // 是否立即执行一次 handler
    //   immediate: true,
    //   // 是否深度监听对象内部值的变化
    //   deep: true
    // }
  },
  methods: {
    getDataList (data) {
      this.echartsData = data
      this.renderChart()
    },
    renderChart () {
      const vm = this
      // const colors = ['#3b7dfd', '#30ce99', '#a9bcdf', '#7f64ff']
      const option = {
        // color: colors,
        // title: {
        //   text: '水质检测'
        // },
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'transparent',
          borderWidth: 0,
          padding: 0,
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          },
          formatter (res) {
            let result = ''
            res.map(item => {
              result = result + `
                <div class="chartLine">
                  <span class="chartCircular" style="border-color:${item.color}"></span>
                  <span class="chartTag">${item.seriesName}</span>
                  <span>0.0</span>
                </div>
              `
            })
            return `
                <div class="chartBack">
                  <div class="chartTitle">${res.length ? res[0].name : ''} ${vm.deviceName[vm.deviceType]}</div>
                  <div class="chartContent">
                    ${result}
                  </div>
                </div>
            `
          }
        },
        legend: {
          y: 'top',
          show: true,
          top: '2%',
          left: '3.6%',
          itemWidth: 6,
          itemGap: 20,
          textStyle: {
            color: '#556677'
          }
        },
        toolbox: {
          feature: {
            // saveAsImage: {}
          }
        },
        grid: {
          left: '3.5%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: this.echartsData.categories,
            min: 'auto',
            max: 'auto',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#707070'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisLine: {
              show: true,
              lineStyle: {
                color: '#707070'
              }
            },
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          }
        ],
        series: this.echartsData.series.map(item => ({
          name: item.name,
          type: 'line',
          // stack: 'Total',
          smooth: true,
          showSymbol: false,
          symbol: 'circle',
          symbolSize: 10,
          areaStyle: {
            opacity: 0.1,
            color: echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: '#3b7dfd'
              },
              {
                offset: 1,
                color: '#fff'
              }
            ])
          },
          emphasis: {
            focus: 'series'
          },
          data: item.data
        }))

      }

      const chart = echarts.init(this.$refs.chart)
      chart.setOption(option, true)
    }
  }
}
</script>

<style lang="scss" scoped>
/* 可自定义样式 */
  ::v-deep .chartBack {
    min-width: 3rem;
    color: #fff;
    .chartTitle {
      background: rgba(53, 117, 96, 0.85);
      border-top-left-radius: 0.1rem;
      border-top-right-radius: 0.1rem;
      padding:0.15rem 0.1rem;
      font-weight: bold;
      font-size: 0.16rem
    }
    .chartContent {
      background: rgba(36, 71, 59, 0.85);
      padding:0.15rem 0.1rem;
      border-bottom-left-radius: 0.1rem;
      border-bottom-right-radius: 0.1rem;
      font-size: 0.12rem
    }
    .chartLine {
      display: flex;
      align-items: center;
      margin-top: 0.15rem;
      &:first-child {
        margin-top: 0;
      }
    }
    .chartCircular {
      width: 0.055rem;
      height: 0.055rem;
      border: 0.045rem solid red;
      border-radius: 50%;
      margin: 0 0.075rem 0 0.15rem;
    }
    .chartTag {
      min-width: 0.85rem
    }
  }
</style>
